<template>
  <div class="node-config">
    <div class="config-title">节点配置</div>
    <div v-if="!currentNode" class="empty-tip">
      <el-empty description="请选择一个节点进行配置" />
    </div>
    <div v-else class="config-form">
      <el-form :model="nodeForm" label-width="80px" size="small">
        <el-form-item label="节点名称">
          <el-input v-model="nodeForm.label" placeholder="请输入节点名称" @blur="updateNodeLabel"/>
        </el-form-item>
        
        <el-form-item label="节点类型">
          <el-input v-model="nodeForm.type" disabled/>
        </el-form-item>
        
        <el-form-item label="节点宽度">
          <el-input-number v-model="nodeForm.width" :min="50" :max="300" @change="updateNodeSize"/>
        </el-form-item>
        
        <el-form-item label="节点高度">
          <el-input-number v-model="nodeForm.height" :min="30" :max="200" @change="updateNodeSize"/>
        </el-form-item>
        
        <el-form-item label="填充颜色">
          <el-color-picker v-model="nodeForm.fillColor" @change="updateNodeStyle"/>
        </el-form-item>
        
        <el-form-item label="边框颜色">
          <el-color-picker v-model="nodeForm.strokeColor" @change="updateNodeStyle"/>
        </el-form-item>
        
        <el-form-item label="边框宽度">
          <el-input-number v-model="nodeForm.strokeWidth" :min="1" :max="10" @change="updateNodeStyle"/>
        </el-form-item>
        
        <el-form-item label="字体大小">
          <el-input-number v-model="nodeForm.fontSize" :min="10" :max="24" @change="updateNodeStyle"/>
        </el-form-item>
        
        <el-form-item label="字体颜色">
          <el-color-picker v-model="nodeForm.fontColor" @change="updateNodeStyle"/>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';

const props = defineProps({
  currentNode: {
    type: Object,
    default: null,
  },
});

const emit = defineEmits(['update-node']);

// 节点配置表单数据
const nodeForm = ref({
  label: '',
  type: '',
  width: 100,
  height: 40,
  fillColor: '#ffffff',
  strokeColor: '#1890ff',
  strokeWidth: 1,
  fontSize: 12,
  fontColor: '#333333'
});

// 监听当前节点变化，更新表单数据
watch(() => props.currentNode, (newNode) => {
  if (newNode) {
    const attrs = newNode.getAttrs();
    const size = newNode.getSize();
    const data = newNode.getData();
    
    nodeForm.value = {
      label: newNode.getLabel() || '',
      type: data?.type || '',
      width: size.width || 100,
      height: size.height || 40,
      fillColor: attrs?.body?.fill || '#ffffff',
      strokeColor: attrs?.body?.stroke || '#1890ff',
      strokeWidth: attrs?.body?.strokeWidth || 1,
      fontSize: attrs?.label?.fontSize || 12,
      fontColor: attrs?.label?.fill || '#333333'
    };
  }
}, { immediate: true });

// 更新节点标签
const updateNodeLabel = () => {
  if (props.currentNode && nodeForm.value.label) {
    props.currentNode.setLabel(nodeForm.value.label);
    props.currentNode.attr('label/text', nodeForm.value.label);
    emit('update-node', props.currentNode);
  }
};

// 更新节点尺寸
const updateNodeSize = () => {
  if (props.currentNode) {
    props.currentNode.resize(nodeForm.value.width, nodeForm.value.height);
    emit('update-node', props.currentNode);
  }
};

// 更新节点样式
const updateNodeStyle = () => {
  if (props.currentNode) {
    props.currentNode.attr({
      body: {
        fill: nodeForm.value.fillColor,
        stroke: nodeForm.value.strokeColor,
        strokeWidth: nodeForm.value.strokeWidth
      },
      label: {
        fontSize: nodeForm.value.fontSize,
        fill: nodeForm.value.fontColor
      }
    });
    emit('update-node', props.currentNode);
  }
};
</script>

<style lang="scss" scoped>
.node-config {
  height: 100%;
  border-left: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;

  .config-title {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #ebeef5;
  }

  .empty-tip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .config-form {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
  }
}
</style>
